<template>
  <el-drawer title="路由配置" size="50%" v-model="visible">
    <vue-jsoneditor mode="tree" :queryLanguagesIds="queryLanguages" v-model:json="jsonData" v-if="show"/>
    <div class="flex items-center justify-center mt-4">
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
    </div>
  </el-drawer>
</template>

<script lang="ts" name="routeForm" setup>
import type {QueryLanguageId} from 'vue3-ts-jsoneditor';
import VueJsoneditor from 'vue3-ts-jsoneditor';
import {addObj, fetchList} from '/@/api/admin/route';
import {useI18n} from 'vue-i18n';
import {useMessage} from '/@/hooks/message';

const emit = defineEmits(['refresh']);
const {t} = useI18n();
const jsonData = ref({});
const show = ref(false);
const queryLanguages = ref<QueryLanguageId[]>(['javascript']);
const visible = ref(false);
const loading = ref(false);

// 初始化数据
const demoData = reactive({
  routeId: new Date().getTime(),
  routeName: '路由名称',
  predicates: [{args: {_genkey_0: '/路由前缀/**'}, name: 'Path'}],
  filters: '[]',
  uri: 'lb://服务名称',
  sortOrder: 0,
  metadata: '{}',
});

// 定义一个异步函数 submit
const submit = async () => {
  // 设置 loading 的值为 true
  loading.value = true;
  try {
    // 调用 addObj 方法向服务器发送请求，传入 jsonData 的值
    await addObj(jsonData.value);
    // 调用 useMessage().success 方法，显示成功的提示信息
    useMessage().success(t('common.optSuccessText'));
  } catch (err: any) {
    // 调用 useMessage().error 方法，显示错误的提示信息
    useMessage().error(err.msg);
  } finally {
    // 设置 loading 的值为 false
    loading.value = false;
    // 设置 visible 的值为 false
    visible.value = false;
    // 触发 refresh 事件
    emit('refresh');
  }
};


/**
 * 获取数据
 * @param {string} id - 路径ID
 * @returns {Promise<Array<Object>>} - 返回一个包含对象的数组
 */
const getData = async (id: string) => {
  let response = await fetchList({routeId: id});
  const result = response.data[0];
  for (let i = 0; i < result.length; i++) {
    const route = result[i];
    if (route.predicates) {
      const predicates = route.predicates;
      route.predicates = JSON.parse(predicates);
    }
    if (route.filters) {
      const filters = route.filters;
      route.filters = JSON.parse(filters);
    }
  }
  return result;
};

const openDialog = async (id?: string) => {
  visible.value = true;
  if (id) {
    await getData(id).then((data) => {
      jsonData.value = data;
    });
  } else {
    jsonData.value = demoData;
  }
  show.value = true
  return;
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>
